<template>
	<view class="pb-safe-area">
		<view class="x-navbar x-navbar-sticky x-navbar-body"
			:style="[`--bg-opacity:${opacity.navbar}`, '--padding:0px', `padding-top:${PLATFORM.statusBarHeight}px`]">
			<view class="x-navbar-icons" @tap="$page.back()">
				<uni-icons type="left" size="24" color="var(--xl-primary-dark-3)"></uni-icons>
			</view>
			<view class="x-navbar-icons"></view>
			<view class="x-navbar-content" style="opacity: var(--bg-opacity);">
				<text class="text-primary h6 font-weight-700 text-ellipsis-1 x-navbar-title">服务详情</text>
			</view>
			<view class="x-navbar-icons"></view>
			<view class="x-navbar-icons"></view>
		</view>
		<view class="p-4 flex flex-column grid-gap-6 min-vh-70 flex-x-center">
			<view class="flex flex-column bg-white rounded-4 p-4" v-if="info.id">
				<view class="flex flex-column flex-center grid-gap-2">
					<uni-icons type="checkbox-filled" size="64" color="var(--xl-primary)"></uni-icons>
					<text class="font-weight-600 text-primary">核验成功</text>
					<text class="h9 text-primary">{{ info.verification_time }}</text>
				</view>
				<view class="flex flex-column grid-gap-4 p-6">
					<view class="flex">
						<text class="w-100px h10 text-placeholder">预约时间</text>
						<text class="flex-1 h10">{{ info.start_time }}</text>
					</view>
					<view class="flex">
						<text class="w-100px h10 text-placeholder">服务时长</text>
						<text class="flex-1 h10">{{ info.duration }}分钟</text>
					</view>
					<view class="flex">
						<text class="w-100px h10 text-placeholder">计划通勤时长</text>
						<text class="flex-1 h10">{{ info.commuting_duration }}分钟</text>
					</view>
					<view class="flex">
						<text class="w-100px h10 text-placeholder">计划抵达时间</text>
						<text class="flex-1 h10">{{ info.plan_arrival_time }}</text>
					</view>
					<view class="flex" v-if="info.commuting_time">
						<text class="w-100px h10 text-placeholder">实际通勤时长</text>
						<text class="flex-1 h10"
							:class="{ 'text-danger': info.timeout, 'text-primary': !info.timeout }">{{
								$func.getTimeText(info.commuting_time) }}</text>
					</view>
					<view class="flex">
						<text class="w-100px h10 text-placeholder">实际抵达时间</text>
						<text class="flex-1 h10">{{ info.arrival_time }}</text>
					</view>
				</view>
				<view class="flex grid-gap-4">
					<button class="flex-1 btn-primary btn-round" @click="$page.back()">返回</button>
					<button class="btn-primary btn-round"
						@click="$page.redirect('/technician/pages/index/index')">{{WebConfigStore.replaceIndustryPersonnelName('技师中心')}}</button>
				</view>
			</view>
			<view class="flex flex-column grid-gap-6" v-else-if="message">
				<view class="bg-white rounded-4 p-4 flex flex-column flex-center">
					<uni-icons type="clear" size="64" color="var(--xl-danger-light-3)"></uni-icons>
					<text class="text-danger-light-3">{{ message }}</text>
				</view>
				<view class="flex grid-gap-4">
					<button class="flex-1 btn-primary btn-round" @click="$page.back()">返回</button>
					<button class="btn-primary btn-round"
						@click="$page.redirect('/technician/pages/index/index')">{{WebConfigStore.replaceIndustryPersonnelName('技师中心')}}</button>
				</view>
				<view class="flex flex-center grid-gap-2" @tap="$page.switch('/pages/index/index')">
					<text class="text-placeholder h9">返回首页</text>
					<uni-icons type="right" color="var(--xl-placeholder)"></uni-icons>
				</view>
			</view>
		</view>
		<x-loading v-if="loading" />
		<x-login ref="xLoginRef" @success="verification" />
	</view>
</template>

<script setup lang="ts">
import { ref, watch, nextTick } from "vue";
import { onLoad, onPageScroll } from "@dcloudio/uni-app";
import { $auth, $api, $func, $message, $page, login } from "@/utils";
import { usePlatformStore, useUserStore, useWebConfigStore, useRefs } from "@/stores";
const PlatformStore = usePlatformStore();
const { PLATFORM } = useRefs(PlatformStore);
const UserStore = useUserStore();
const { USERINFO } = useRefs(UserStore);
const WebConfigStore = useWebConfigStore();
const { WEBCONFIG } = useRefs(WebConfigStore);
const code = ref("");
const info = ref({});
const loading = ref(false);
const message = ref("");
const opacity = ref<{
	navbar: number | string
}>({
	navbar: 0,
});
const top = ref(0);
watch(() => top.value, (val: number) => {
	if (val < -10) {
		return;
	}
	opacity.value.navbar = val > 50 ? 1 : (val / 50).toFixed(1);
})
onPageScroll(({ scrollTop }: { scrollTop: number }) => {
	top.value = scrollTop;
})
const verification = () => {
	loading.value = true
	$api.AppointmentService.verification({
		code: code.value
	})
		.then(({ data }: { data: any }) => {
			info.value = data
			if (data.arrival_time) {
				const arrival_time = new Date(data.arrival_time.replace(/-/g, '/'));
				info.value.arrival_time = `${$func.getDayName(arrival_time)} ${arrival_time.getHours().toString().padStart(2, '0')}:${arrival_time.getMinutes().toString().padStart(2, '0')}`;
				const plan_arrival_time = new Date(data.start_time.replace(/-/g, '/'));
				plan_arrival_time.setMinutes(plan_arrival_time.getMinutes() + data.commuting_duration);
				info.value.plan_arrival_time = `${$func.getDayName(plan_arrival_time)} ${plan_arrival_time.getHours().toString().padStart(2, '0')}:${plan_arrival_time.getMinutes().toString().padStart(2, '0')}`;
				info.value.timeout = false;
				if (arrival_time > plan_arrival_time) {
					info.value.timeout = true;
				}
			}
			if (data.state === 4) {
				const service_start_time = new Date(data.service_start_time.replace(/-/g, '/'));
				service_start_time.setMinutes(service_start_time.getMinutes() + data.duration);
				const now = new Date;
				info.value.time = (service_start_time.getTime() - now.getTime()) / 1000;
			}
		}).catch((err: any) => {
			message.value = err.msg;
		}).finally(() => {
			loading.value = false
		})
}
const xLoginRef = ref();
onLoad((options: any) => {
	code.value = options.code;
	if (!UserStore.hasLogin()) {
		nextTick(() => {
			login({
				redirect: 'technician-verification',
				action: code.value
			}, xLoginRef.value);
		})
	} else if ($auth.auth({ action: 'user', permission: 'technician' })) {
		verification();
	} else {
		$page.switch('/pages/index/index');
	}
})
</script>
<style lang="scss">
/* #ifdef H5 */
uni-page[data-page="technician/pages/index/verification"] {

	/* #endif */
	page {
		background: radial-gradient(circle at 15% 20%, var(--xl-primary) -100%, transparent 35%),
			radial-gradient(circle at 27% 5%, var(--xl-primary-light-3) -50%, transparent 30%),
			radial-gradient(circle at 85% 17%, var(--xl-primary-light-1) -50%, transparent 25%);
		background-repeat: no-repeat;
		background-position: top center;
		background-color: $uni-bg-color-grey;
		/* #ifdef H5 */
		background-attachment: fixed;
		/* #endif */
	}

	/* #ifdef H5 */
}

/* #endif */
.w-100px {
	width: 100px;
}
</style>
